<script lang="ts" setup>
import { onMounted, ref,defineProps } from 'vue';

import {
  EchartsUI,
  type EchartsUIType,
  useEcharts,
} from '@vben/plugins/echarts';

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);



const props=defineProps(['data'])

let dataList=props.data


let xData=[];
let yData=[];
let yData2=[];
for(var i=0;i<dataList.length;i++){
  var item=dataList[i];
  xData.push(item['days']);
  yData.push(item['amount']);
  yData2.push(item['count']);
}
// console.log("xData2",xData);
// console.log("yData2",yData);



onMounted(() => {
  renderEcharts({
    grid: {
      bottom: 0,
      containLabel: true,
      left: '1%',
      right: '1%',
      top: '2 %',
    },
    series: [
      {
        name: "采购额(元)",
        barMaxWidth: 60,
        // color: '#4f69fd',
        data: yData,
        type: 'bar',
      },

      {
        name: "采购量",
        barMaxWidth: 60,
        // color: '#4f69fd',
        data: yData2,
        type: 'bar',
      },
    ],
    tooltip: {
      axisPointer: {
        lineStyle: {
          // color: '#4f69fd',
          width: 1,
        },
      },
      trigger: 'axis',
    },
    xAxis: {
      data: xData,
      type: 'category',
    },
    yAxis: {
      
      splitNumber: 4,
      type: 'value',
    },
  });
});
</script>

<template>
  <EchartsUI ref="chartRef" />
</template>
